﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>生肖认领旅</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;
        }
        body{
            display:flex;
            justify-content:center;
            align-items:center;
            min-height:100vh;
        }
        body::before{
            content:'';
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:linear-gradient(45deg,#e91e63,#e91e63 50%, #ffc107 50%,#ffc107);
        }
            body::after {
                content: '';
                position: absolute;
                top: -20px;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(160deg,#03a9f4,#03a9f4 50%, transparent 50%,transparent);
                animation: animate 5s ease-in-out infinite;
            }
            @keyframes animate{
                0%,100%{
                    transform:translateY(10px);
                }
                50%{
                    transform:translateY(-10px);
                }
            }
            .container{
                position:relative;
            }
                .container::before {
                    content: '';
                    position: absolute;
                    bottom: -150px;
                    width: 100%;
                    height: 60px;
                    background: radial-gradient(rgba(0,0,0,.2),transparent,transparent);
                    border-radius: 50%;
                }
        .box {
            position: relative;
            z-index: 1;
            width: 400px;
            height: 400px;
            backdrop-filter: blur(25px);
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,.5);
            animation: animate 5s ease-in-out infinite;
            animation-delay:-2.5s;
        }
        .clock{
            position:absolute;
            top:10px;
            left:10px;
            right:10px;
            bottom:10px;
            display:flex;
            justify-content:center;
            align-items:center;
            background:radial-gradient(transparent,rgba(255,255,255,.2)),url(tuzi.jpg);
            background-size:cover;
            border-radius:50%;
            backdrop-filter:blur(25px);
            
        }
        h2{
            color:black;
        }
    </style>
</head>
<body>
    <h2>点点生肖图像看看</h2>
    <div class="container">
        <div class="box">
            <a href="龙.html"><div class="clock"></div></a>
            
        </div>
    </div>
</body>
</html>